<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script language="javascript" src="__PUBLIC__/jquery/jquery.js"></script>
<link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css">
<link rel="stylesheet" href="__TPL__/css/base.css">
</head>

<body>

<div class="box">
    <div class="box_left">
		<blockquote class="layui-elem-quote">组织架构</blockquote>
    	<ul id="dept_list"  class="f_16">
    		
    	</ul>
    </div>
    <div class="box_right">
        <blockquote class="layui-elem-quote">用户列表（企业微信组织架构调整时，本平台会自动更新。如若调整组织架构，请登陆企业微信进行管理。）<button class="layui-btn   layui-btn-sm" onClick="update_data()"><i class="layui-icon">&#x1002;</i> 点击同步</button></blockquote>
        <table class="layui-table" lay-size="lg" lay-data="{height: 'full-100', limit:10,url:'__URL__/user/get_user_list', page:true, id:'user_list'}" lay-filter="user_list">
            <thead>
                <tr>
                    <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                    <th lay-data="{field:'avatar', width:70}">头像</th>
                    <th lay-data="{field:'userid'}">userid</th>
                    <th lay-data="{field:'name'}">用户名</th>
                    <th lay-data="{field:'gender'}">性别</th>
                    <th lay-data="{field:'position'}">职位</th>
                    <th lay-data="{field:'mobile'}">电话</th>
                    <th lay-data="{field:'status', sort: true}">状态</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<script src="__PUBLIC__/layui/layui.js"></script>
<script>
	//JavaScript代码区域
	layui.use(['tree', 'layer','table'], function(){
		var layer = layui.layer;
		var table = layui.table;
		layui.tree({
			elem: '#dept_list', //传入元素选择器,
			click: function(node){
				reload_user_list(node.id);
			},
			nodes: {!$dept_str!}
			
		});
	});
	function reload_user_list(dept_id)
	{
		layui.table.reload('user_list', {
		  where: {
			dept_id: dept_id,
		  }
		  ,page: {
			curr: 1
		  }
		});
	}
	$(function(){
		right_box()
		$(window).resize(function(){
			right_box()
		});
	})
	function right_box()
	{
		$('.box_right').width($('body').width()-$('.box_left').width()-22+'px');
	}
	function update_data()
	{
		layer.confirm('是否重新同步组织架构?', {icon: 3, title:'提示'}, function(index){
		  var myload = layer.load(1);
		  $.get('__ROOT__/wx/reg/update_user_data',function(data){
			  if(data.res==false)
			  {
				  layer.msg(data.msg);
			  }else{
				  layer.msg(data.msg,{time:1000},function(){
					  window.location.reload();
				  });
			  }
			  layer.close(myload);     
		  });
		  layer.close(index);
		});
	}
</script>
<style type="text/css">
	.layui-tree .layui-tree-leaf {
		margin-left: 22px;
	}
</style>
</body>
</html>
